<template>
  <div class="p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Markdown 预览器</h2>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <!-- 编辑区域 -->
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            编辑区域
          </label>
          <div class="flex gap-2">
            <button
              v-for="template in templates"
              :key="template.name"
              @click="insertTemplate(template.content)"
              class="px-2 py-1 text-sm rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
            >
              {{ template.name }}
            </button>
          </div>
        </div>
        <textarea
          v-model="markdownText"
          placeholder="输入 Markdown 文本..."
          class="w-full h-[calc(100vh-240px)] p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono resize-none"
        ></textarea>
      </div>

      <!-- 预览区域 -->
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            预览区域
          </label>
          <button
            @click="copyHtml"
            class="px-3 py-1 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 transition-colors"
          >
            复制 HTML
          </button>
        </div>
        <div
          class="w-full h-[calc(100vh-240px)] p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-auto prose dark:prose-invert max-w-none"
          v-html="renderedHtml"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'

const markdownText = ref('')

// Markdown 渲染配置
marked.setOptions({
  gfm: true,
  breaks: true
})

// 渲染 HTML
const renderedHtml = computed(() => {
  const html = marked.parse(markdownText.value)
  return typeof html === 'string' ? DOMPurify.sanitize(html) : ''
})

// Markdown 模板
const templates = [
  {
    name: '标题',
    content: '# 一级标题\n## 二级标题\n### 三级标题'
  },
  {
    name: '列表',
    content: '- 无序列表项 1\n- 无序列表项 2\n\n1. 有序列表项 1\n2. 有序列表项 2'
  },
  {
    name: '表格',
    content: '| 表头 1 | 表头 2 |\n|---------|--------|\n| 内容 1 | 内容 2 |'
  },
  {
    name: '代码',
    content: '```javascript\n// 代码示例\nconst hello = "world";\nconsole.log(hello);\n```'
  },
  {
    name: '引用',
    content: '> 这是一段引用文本\n> 可以有多行'
  }
]

// 插入模板
const insertTemplate = (content: string) => {
  const textarea = document.querySelector('textarea')
  if (!textarea) return

  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const text = markdownText.value

  markdownText.value = text.substring(0, start) + content + text.substring(end)

  // 恢复焦点并设置光标位置
  setTimeout(() => {
    textarea.focus()
    const newPosition = start + content.length
    textarea.setSelectionRange(newPosition, newPosition)
  })
}

// 复制 HTML
const copyHtml = async () => {
  try {
    await navigator.clipboard.writeText(renderedHtml.value)
    // 这里可以添加一个复制成功的提示
  } catch (err) {
    console.error('复制失败:', err)
  }
}
</script>

<style>
/* 自定义预览区域样式 */
.prose {
  max-width: none;
}

.prose pre {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 1em;
  border-radius: 0.375rem;
}

.prose code {
  color: #e83e8c;
  font-weight: 600;
}

.prose pre code {
  color: inherit;
  font-weight: inherit;
}

.dark .prose {
  color: #e5e7eb;
}

.dark .prose a {
  color: #60a5fa;
}

.dark .prose strong {
  color: #f3f4f6;
}

.dark .prose code {
  color: #f472b6;
}

.dark .prose pre {
  background-color: #111827;
}

.dark .prose blockquote {
  border-left-color: #374151;
  color: #9ca3af;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4 {
  color: #f3f4f6;
}

.dark .prose hr {
  border-color: #374151;
}

.dark .prose table {
  border-color: #374151;
}

.dark .prose thead {
  border-bottom-color: #374151;
}

.dark .prose tbody tr {
  border-bottom-color: #374151;
}
</style> 